<template>
  <div class="app-container home">
    <div class="head">
      <div class="wrap">
        <div class="icon">
          <img src="../assets/images/course.png" alt="" style="width:100%;height:100%">
        </div>
        <div class="right">
          <div class="title">课程总数（门）</div>
          <div class="num">{{coursrNum}}</div>
        </div>
      </div>
      <div class="wrap">
        <div class="icon">
          <img src="../assets/images/teacher.png" alt="" style="width:100%;height:100%">
        </div>
        <div class="right">
          <div class="title">老师人数（人）</div>
          <div class="num">{{teacherNum}}</div>
        </div>
      </div>
      <div class="wrap">
        <div class="icon">
          <img src="../assets/images/student.png" alt="" style="width:100%;height:100%">
        </div>
        <div class="right">
          <div class="title">学生人数（人）</div>
          <div class="num">{{studentNum}}</div>
        </div>
      </div>
      <div class="wrap">
        <div class="icon">
          <img src="../assets/images/register.png" alt="" style="width:100%;height:100%">
        </div>
        <div class="right">
          <div class="title">注册人数（人）</div>
          <div class="num">{{registerNum}}</div>
        </div>
        
      </div>
    </div>
    <div class="main">
      <div class="con_wrap">
        <div class="title">{{registerNumTitle}}</div>
        <div class="echart" id="register"></div>
      </div>
      <div class="con_wrap">
        <div class="title">{{auditionCourseTitle}}</div>
        <div class="echart" id="auditionCourse"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { 
  getStudentNumberChart,
  getRegisterNumberChart,
  getTeacherNumber,
  getStudentNumber,
  getRegisterNumber,
  getCourseNumber
} from "@/api/home";
export default {
  name: "Index",
  data() {
    return {
      coursrNum: 0,
      teacherNum: 0,
      studentNum: 0,
      registerNum: 0,
      registerNumTitle: '',
      auditionCourseTitle: ''
    };
  },
  mounted() {
    this.getData()
    this.drawLineRegister()
    this.drawAuditionCourse()
  },
  methods: {
    async getData() {
      let res1 = await getCourseNumber()
      let res2 = await getTeacherNumber()
      let res3 = await getStudentNumber()
      let res4 = await getRegisterNumber()
      this.coursrNum = res1.data
      this.teacherNum = res2.data
      this.studentNum = res3.data
      this.registerNum = res4.data
    },
    async drawLineRegister() {
      let res = await getRegisterNumberChart()
      this.registerNumTitle = res.data.name
      var myChart=echarts.init(document.getElementById("register"));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#409EFF'],
        xAxis: {
          name: '日期',
          type: 'category',
          data: res.data.date,
          axisLabel: {  
            interval:0,  
            rotate:40  
          },
          axisTick: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          name: '人数',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: res.data.actualData,
            type: 'line'
          }
        ]
      };
      myChart.setOption(option);
    },
    async drawAuditionCourse() {
      let res = await getStudentNumberChart()
      console.log(res, 'res')
      this.auditionCourseTitle = res.data.name
      var myChart=echarts.init(document.getElementById("auditionCourse"));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#409EFF'],
        xAxis: {
          name: '日期',
          type: 'category',
          data: res.data.date,
          axisLabel: {  
            interval:0,  
            rotate:40  
          },
          axisTick: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          name: '人数',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: res.data.actualData,
            type: 'line'
          }
        ]
      };
      myChart.setOption(option);
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

<style scoped lang="scss">
  .home{
    display: flex;
    flex-direction: column;
    background: rgba(222,222,222, .2);
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .wrap {
        width: 270px;
        height: 100px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0px 4px 16px 0px rgba(150, 150, 150, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon {
          width: 45px;
          height: 45px;
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          .title {
            font-size: 14px;
          }
          .num {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            color: #46a6ff;
          }
        }
        
      }
    }
    .main {
      margin-top: 30px;
      .con_wrap {
        padding: 15px;
        border-radius: 8px;
        box-sizing: border-box;
        margin-bottom: 30px;
        background: #fff;
        .title {
          font-size: 20px;
          font-weight: 600;
        }
        .echart {
          height: 400px;
        }
      }
    }
  }
</style>
